(function($) {
    $.fn.doubleTable = function(params) {
        return this.each(function() {
            $(this).width('90%');
            $(this).css('pading')
            $(this).children('.content').html('');
            var opts = $.extend({}, $.fn.doubleTable.defaults, params)
            var enTete = eval('(' + opts.enTete + ')');
            var recherches= eval('(' + opts.recherches + ')');
            var init=eval('('+opts.init+')')
            var initParArticleQuantite=eval('('+opts.initParArticleQuantite+')')
            var enTeteTH='';
            var enTeteTHRecherche=$('<tr></tr>');
            var recherchesInputs=new Array();
            var spanPage=new Array();
            var ellementAjouter=new Array();
            var tbody = $('<tbody><tr><td style="text-align: center" colspan="'+enTete.colones.length+'"><img src="/images/icon/ajax.gif" /></td></tr></tbody>');
            var tfoot = $('<tfoot></tfoot>');
            var tfootDroit=$('<tfoot></tfoot>');
            var tbodyDroit = $('<tbody></tbody>');
            var trFoot= $('<tr></tr>');
            var trFootDroit =$('<tr></tr>');
            var tdFoot=$('<td style="background: none repeat scroll 0 0 #444444;width: 100%;padding: 0"  colspan="'+enTete.colones.length+'"></td>');
            var tdFootDroit=$('<td style="background: none repeat scroll 0 0 #444444;width: 100%;padding: 0"  colspan="'+enTete.colones.length+1+'"></td>');
            var divFoot=$('<div class="dataTables_paginate paging_full_numbers" ></div>')
            var divFootDroit=$('<div class="dataTables_paginate paging_full_numbers" ></div>')
            var table = $('<table style="width: 100%"></table>')
            var trtable=$('<tr></tr>')
            var trValide=$('<tr></tr>')
            var tdValide = $('<td colspan="2"></td>')
            var divValide=$('<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" align="center"></div>')
            tdValide.append(divValide)
            trValide.append(tdValide)
            table.append(trtable)
            table.append(trValide)
            var btnvalider =$('<input style="margin-right: 30px" class="mws-button green mws-i-24 i-check large" type="button" value="Valider">')
            divValide.append(btnvalider)
            if(initParArticleQuantite.colones.length > 0){
                $.ajax({
                    dataType: 'json',
                    url: opts.urlInitParArticleQuantite,
                    data: opts.data+'&data='+opts.initParArticleQuantite,
                    success: function(data){
                        var tr;
                        for(var i=0;i<data.articles.length;i++){
                            tr=$('<tr id="'+data.articles[i]['id']+'"></tr>')
                            for(var j =0; j<enTete.colones.length;j++){
                                var td=$('<td>'+data.articles[i][enTete.colones[j]]+'</td>');
                                tr.append(td);
                            }
                            ellementAjouter[ellementAjouter.length]=data.articles[i]['id'];
                            var input=$('<input type="text" />')
                            var td=$('<td></td>');
                            td.append(input)
                            tr.append(td);
                            input.spinner({
                                min: 1,
                                val: data.articles[i]['Quantite'],
                                width: 100,
                                scale: 0
                            });
                            
                            tbodyDroit.append(tr);
                            //                            alert(tbodyDroit.html())
                            PaginataionTableDroit(1);
                        }
                                                LoadTbady(1,true)
                        
                        opts.valider(tbodyDroit)
                    }
                })
            }
            for(var i =0; i<enTete.colones.length;i++){
                var exist=false;
                for(var j =0; j<recherches.colones.length;j++){
                
                    if(enTete.colones[i] == recherches.colones[j]){
                        var input= $('<input style="width:100px" type="text" id="recherche_'+recherches.colones[j]+'"/>')
                   
                        recherchesInputs[recherchesInputs.length]=input;
                        var th=$('<th></th>')
                        th.append(input)
                        enTeteTHRecherche.append(th);
                        exist=true;
                    }
                }
                if(!exist)
                    enTeteTHRecherche.append($('<th></th>'));
            }
            for(var i =0; i<enTete.colones.length;i++){
                enTeteTH=enTeteTH+'<th>'+enTete.colones[i]+'</th>';
            }
            for(var i=0;i<init.colones.length;i++){
                
                var tr1=$('<tr id="'+init.colones[i][0]+'"></tr>')
                ellementAjouter[ellementAjouter.length]=init.colones[i][0];
                for(var j =1; j<enTete.colones.length+1;j++){
                    tr1.append('<td>'+init.colones[i][j]+'</td>')
                }
                tbodyDroit.append(tr1);
                var input=$('<input type="text" />')
                var td=$('<td></td>');
                td.append(input)
                tr1.append(td);
                input.spinner({
                    min: 1,
                    val: init.colones[i][j],
                    width: 100,
                    scale: 0
                });
                PaginataionTableDroit(1);
            }
            for(var i=0;i<recherchesInputs.length;i++){
                recherchesInputs[i].keyup(function(){
                    data='';
                    for(var j=0;j<recherchesInputs.length;j++){
                        data=data+'&'+recherchesInputs[j].attr('id')+'='+recherchesInputs[j].val();
                    }
                    LoadTbady(1,false)
                })
            }
            
            btnvalider.click(function(){
                opts.valider(tbodyDroit)
                //                btnAnuler.click()
                opts.annuler()
            })
            var btnAnuler = $('<input class="mws-button black mws-i-24 i-cross large" type="button" value="Annuler">')
            divValide.append(btnAnuler)  
            btnAnuler.click(function(){
                divFootDroit.html('')
                //                tbodyDroit.html('')
                ellementAjouter=new Array()
                
                for(var j=0;j<recherchesInputs.length;j++){
                    recherchesInputs[j].val('');
                }
                LoadTbady(1,false)
                opts.annuler()
            })
            var tdGauche=$('<td style="width: 50%;padding: 20px;"><label>Liste Non Selectiooner</label></br></td>')
            var tabGauche= $('<table style="border: 1px solid;" class="mws-table">'+
                '<thead><tr>'+
                enTeteTH+
                '</tr></thead>'
                +'</table>');
            tabGauche.children('thead').append(enTeteTHRecherche);
            tabGauche.append(tbody);
            tdGauche.append(tabGauche)
            trtable.append(tdGauche);
            var tabDroite= $('<table style="border: 1px solid;" class="mws-table">'+
                '<thead><tr>'+
                enTeteTH+
                '<th>Quantité</th></tr></thead>'
                +'</table>');
            var tdDroite=$('<td style="width: 50%;padding: 20px;"><label>Liste Selectiooner</label></br></td>');
            tdDroite.append(tabDroite);
            trtable.append(tdDroite);
            tabDroite.append(tbodyDroit);
            
            tdFootDroit.append(divFootDroit)
            tdFoot.append(divFoot)
            trFootDroit.append(tdFootDroit)
            trFoot.append(tdFoot)
            tfootDroit.append(trFootDroit)
            tfoot.append(trFoot)
            tabGauche.append(tfoot)
            tabDroite.append(tfootDroit)
            LoadTbady(1,false)
            $(this).children('.content').append(table)
            function LoadTbady(page,bool){
                var recherche='';
                for(var j=0;j<recherchesInputs.length;j++){
                    recherche=recherche+'&'+recherchesInputs[j].attr('id')+'='+recherchesInputs[j].val();
                }
                $.ajax({
                    dataType: 'json',
                    url: opts.urlContenu,
                    data: opts.data+'&page='+page+recherche+'&ellement='+ellementAjouter,
                    success: function(data){
                        tbody.html('');
                        for(var i =0; i<data.articles.length;i++){
                            var tr=$('<tr id="'+data.articles[i]['id']+'"></tr>')
                            tr.click(function(){
                                ajouterEllement($(this));
                            })
                            for(var j =0; j<enTete.colones.length;j++){
                                var td=$('<td>'+data.articles[i][enTete.colones[j]]+'</td>');
                                tr.append(td);
                            }
                     
                            tbody.append(tr);
                        }
                        Pagination(data);
                    }
                })
                if(bool){
                    opts.valider(tbodyDroit)
                }
            }
            function ajouterEllement(tr){
                var tr1=$('<tr id="'+tr.attr('id')+'"></tr>')
                tr1.html(tr.html());
                ellementAjouter[ellementAjouter.length]=tr.attr('id');
                tbodyDroit.append(tr1);
                tr.remove();
                var input=$('<input type="text" />')
                var td=$('<td></td>');
                td.append(input)
                tr1.append(td);
                input.spinner({
                    min: 1,
                    val: 1,
                    width: 100,
                    scale: 0
                });
                PaginataionTableDroit(1);
                
                
            }
            function PaginataionTableDroit(page){
                //                alert(page)
                var count = tbodyDroit.children('tr').length;
                var nbPage;
                if(parseInt(count/7) < parseFloat(count/7)){
                    nbPage=parseInt(count/7)+1;
                }else{
                    nbPage= parseInt(count/7);
                }
                divFootDroit.html('');
                if(nbPage>1){
                    if(page == 1){
                        divFootDroit.append('<span class="first paginate_button paginate_button_disabled">Premier</span>'+
                            '<span class="previous paginate_button paginate_button_disabled">Précédent</span><span>');
                    }else{
                        var span2 = $('<span  class="first paginate_button ">Premier</span>');
                        span2.click(function(){
                            PaginataionTableDroit(1)
                        })
                        divFootDroit.append(span2);
                        var span3 = $('<span class="previous paginate_button ">Précédent</span>');
                        span3.click(function(){
                            PaginataionTableDroit(page-1)
                        })
                        divFootDroit.append(span3)
                    }
                    var span = new Array();
                    for(var i =1; i<=nbPage;i++){
                        
                        if(i == page){
                            span[span.length]=$('<span class="paginate_active">'+i+'</span>');
                            divFootDroit.append(span[span.length-1])
                        }else{
                            span[span.length]=$('<span class="paginate_button">'+i+'</span>');
                            
                            divFootDroit.append(span[span.length-1])
                        }
                    }
                    if(page == nbPage){
                        divFootDroit.append('<span class="next paginate_button paginate_button_disabled">Suivant</span>'+
                            '<span class="next paginate_button paginate_button_disabled">Dernier</span><span>');
                    }else{
                        var span4=$('<span id="'+page+1+'" class="next paginate_button ">Suivant</span>')
                        span4.click(function(){
                            PaginataionTableDroit(page+1)
                        })
                        
                        divFootDroit.append(span4)
                        var span5= $('<span onclick="'+nbPage+'" class="next paginate_button ">Dernier</span>')
                        divFootDroit.append(span5)
                        span5.click(function(){
                            PaginataionTableDroit(nbPage)
                        })
                    }
                    for(var i=0;i<span.length;i++){
                        span[i].click(function(){
                            
                            PaginataionTableDroit(parseInt($(this).html()))
                        })
                    }
                }
                var compteur=1;
                tbodyDroit.children('tr').each(function(){
                    if(compteur > 7*page-7 && compteur <7*page+1){
                        $(this).show()
                    }else{
                        $(this).hide();
                    }
                    compteur++;
                })
                
            }
            function Pagination(data){
                spanPage=new Array();
                divFoot.html('');
                if(data.links.length>1){
                    var span;
                    if(data.page == 1){
                        divFoot.append('<span class="first paginate_button paginate_button_disabled">Premier</span>'+
                            '<span class="previous paginate_button paginate_button_disabled">Précédent</span><span>');
                    }else{
                        span = $('<span id="1" class="first paginate_button ">Premier</span>');
                        spanPage[spanPage.length]=span;
                        divFoot.append(span);
                        span = $('<span id="'+data.page-1+'" class="previous paginate_button ">Précédent</span>');
                        spanPage[spanPage.length]=span;
                        divFoot.append(span)
                    }
                    for(var i =0; i<data.links.length;i++){
                        if(data.links[i] == data.page){
                            span=$('<span id="'+data.page+'" class="paginate_active">'+data.page+'</span>');
                            spanPage[spanPage.length]=span;
                            divFoot.append(span)
                        }else{
                            span=$('<span id="'+data.links[i]+'" class="paginate_button">'+data.links[i]+'</span>');
                            spanPage[spanPage.length]=span;
                            divFoot.append(span)
                        }
                    }
                    if(data.page == data.links[data.links.length-1]){
                        divFoot.append('<span class="next paginate_button paginate_button_disabled">Suivant</span>'+
                            '<span class="next paginate_button paginate_button_disabled">Dernier</span><span>');
                    }else{
                        span=$('<span id="'+data.page+1+'" class="next paginate_button ">Suivant</span>')
                        spanPage[spanPage.length]=span;
                        divFoot.append(span)
                        span= $('<span onclick="'+data.dernierePage+'" class="next paginate_button ">Dernier</span>')
                        spanPage[spanPage.length]=span;
                        divFoot.append(span)
                    }
                    for(var i=0;i<spanPage.length;i++){
                        spanPage[i].click(function(){
                            LoadTbady($(this).attr('id'))
                        })
                    }
                }
            }
        })
    };
    $.fn.doubleTable.defaults = {
        enTete: '{"colones": []}',
        recherches: '{"colones": []}',
        urlContenu: '',
        urlInitParArticleQuantite: '',
        data: '',
        annuler: function(){},
        valider: function(tbody){},
        init: '{"colones": []}',
        initParArticleQuantite: '{"colones": []}'
    }
})(jQuery);

